<template>
	<view class="main">
		<!-- 顶部区域 -->
		<view class="top">
			<view class="logo" @click="openAi">1</view>
			<view class="menu-top">
				<view v-for="(item, index) in menuTop" :key="index" class="menu-top-item">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 底部区域 -->
		<view class="down">
			<view class="left">
				<view v-for="(item, index) in menuLeft" :key="index" class="menu-item">
					{{ item }}
				</view>
			</view>
			<view class="right" @click="hik">
				<table>
					<thead>
						<th v-for="(header, index) in thead" :key="index">{{ header }}</th>
					</thead>
					<tbody>
						<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
							<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
						</tr>
					</tbody>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
import hikVideo from '../../unit/hikVideo.js';
//	import getImgForAi from '../../unit/getImgForAi.js';
export default {
	data() {
		return {
			 tableData: [
			                ['数据 1-1', '数据 1-2', '数据 1-3', '数据 1-3'],
			                ['数据 2-1', '数据 2-2', '数据 2-3', '数据 1-3'],
			                ['数据 3-1', '数据 3-2', '数据 3-3', '数据 1-3']
			            ],
			menuLeft: ['每日采集表', '微信用户表', '菜单', '菜单', '菜单'],
			menuTop: ['菜单', '菜单', '菜单', '菜单', '菜单'],
			thead: ['商品ID', '商品名称', '商品条码', '是否排期']
		};
	},
	onLoad() {},
	methods: {
		// toadminPage(){
		// 	uni.navigateTo({
		// 		url:'/pages/adminPage/adminPage'
		// 	})
		// },
		hik() {
			hikVideo();
		},
		openAi() {
			getImgForAi();
		}
	}
};
</script>

<style lang="scss" scoped>
/* 全局样式 */
.main {
	display: flex;
	flex-direction: column;
	width: 100%; /* 占满浏览器宽度 */
	height: auto;
}

/* 顶部区域 */
.top {
	width: 100%; /* 占满父容器宽度 */
	height: 60px; /* 使用 px 单位 */
	background-color: #8f8f94;
	display: flex;
	align-items: center;
}

.logo {
	width: 20%; /* 占父容器宽度的 20% */
	height: 100%;
	background-color: aliceblue;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px; /* 使用 px 单位 */
}

.menu-top {
	width: 80%; /* 占父容器宽度的 80% */
	height: 100%;
	display: flex;
	align-items: center;
}

.menu-top-item {
	flex: 1; /* 让每个菜单项均匀分布 */
	text-align: center;
	font-size: 16px; /* 使用 px 单位 */
	color: white;
}

/* 底部区域 */
.down {
	display: flex;
	width: 100%; /* 占满父容器宽度 */
	height: auto;
}

.left {
	display: flex;
	flex-direction: column; /* 垂直排列 */
	width: 20%; /* 占父容器宽度的 20% */
	background-color: greenyellow;
}

.menu-item {
	width: 100%; /* 占满父容器宽度 */
	padding: 10px; /* 使用 px 单位 */
	text-align: center;
	border-bottom: 1px solid #ccc; /* 使用 px 单位 */
	box-sizing: border-box; /* 防止 padding 影响宽度 */
}

.right {
	display: flex;
	width: 80%; /* 占父容器宽度的 80% */
	height: auto;
	background-color: gold;
	align-items: center;
	justify-content: center;
	font-size: 16px; /* 使用 px 单位 */
}

/* 响应式设计 */
@media (max-width: 768px) {
	.logo {
		width: 30%; /* 在小屏幕上占 30% */
	}
	.menu-top {
		width: 70%; /* 在小屏幕上占 70% */
	}
	.left {
		width: 30%; /* 在小屏幕上占 30% */
	}
	.right {
		width: 70%; /* 在小屏幕上占 70% */
	}
}
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    word-wrap: break-word;
}

th {
    background-color: #f2f2f2;
}
</style>
